<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顾问端 - 需求详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center justify-between">
        <i class="fas fa-arrow-left text-gray-600 text-xl"></i>
        <div class="text-lg font-semibold text-gray-800">需求详情</div>
        <i class="fas fa-ellipsis-v text-gray-600 text-xl"></i>
    </nav>

    <div class="pb-24">
        <!-- 需求基本信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h1 class="text-xl font-bold text-blue-600 mb-2">系统功能优化需求</h1>
            <div class="flex items-center space-x-2 mb-3">
                <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">处理中</span>
                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">功能开发</span>
            </div>
            <div class="flex items-center space-x-3 mb-3">
                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
                    张
                </div>
                <div>
                    <div class="text-sm font-medium text-gray-800">张先生</div>
                    <div class="text-xs text-gray-400">138****8888</div>
                </div>
            </div>
            <div class="flex items-center space-x-2 mb-3">
                <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                <span class="text-gray-600 text-sm">优先级：中</span>
            </div>
            <p class="text-gray-700 text-sm mb-4 leading-relaxed">
                需要优化系统的性能，提升用户体验，包括页面加载速度、数据处理效率等方面的改进。希望能够在现有基础上提升30%的性能指标。
            </p>
            <div class="text-gray-400 text-xs">
                <div>提交于 2024-01-15 10:30</div>
                <div class="mt-1">最后更新 2024-01-16 14:20</div>
            </div>
        </div>

        <!-- 进度更新 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">进度更新</h2>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-1"></i>添加进度
                </button>
            </div>
        </div>

        <!-- 处理进度 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">处理进度</h2>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        <div class="w-0.5 h-12 bg-green-500 mt-1"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">需求已提交</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-15 10:30</div>
                        <div class="text-xs text-gray-600 mt-1">我</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="flex flex-col items-center mr-4">
                        <div class="w-3 h-3 bg-blue-500 rounded-full border-2 border-white ring-2 ring-blue-500"></div>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-800">方案设计中</div>
                        <div class="text-xs text-gray-500 mt-1">2024-01-16 14:20</div>
                        <div class="text-xs text-gray-600 mt-1">正在设计优化方案</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 沟通记录 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">沟通记录</h2>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-1"></i>添加记录
                </button>
            </div>
            <div class="space-y-4">
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
                        我
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center space-x-2 mb-1">
                            <span class="text-sm font-medium text-gray-800">我</span>
                            <span class="text-xs text-gray-400">2024-01-16 14:20</span>
                        </div>
                        <div class="text-sm text-gray-700 bg-gray-50 rounded-lg p-2">
                            您好，我已经开始分析您的需求，预计明天可以给出初步方案。
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关报价 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">相关报价</h2>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-1"></i>创建报价
                </button>
            </div>
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">报价单号：QT20240116001</span>
                    <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded">待确认</span>
                </div>
                <div class="text-2xl font-bold text-blue-600 mb-2">¥15,000</div>
                <button class="w-full mt-3 bg-gray-100 text-gray-700 py-2 rounded-lg text-sm">查看详情</button>
            </div>
        </div>

        <!-- 相关协议 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-gray-800">相关协议</h2>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-upload mr-1"></i>上传协议
                </button>
            </div>
            <div class="text-center text-gray-400 text-sm py-4">暂无协议</div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200" style="max-width: 414px; margin: 0 auto;">
        <div class="grid grid-cols-3 py-2">
            <div class="text-center py-2">
                <i class="fas fa-home text-gray-400 text-xl"></i>
                <div class="text-gray-400 text-xs mt-1">工作台</div>
            </div>
            <div class="text-center py-2">
                <i class="fas fa-list text-gray-400 text-xl"></i>
                <div class="text-gray-400 text-xs mt-1">需求</div>
            </div>
            <div class="text-center py-2">
                <i class="fas fa-user text-gray-400 text-xl"></i>
                <div class="text-gray-400 text-xs mt-1">我的</div>
            </div>
        </div>
    </div>
</body>
</html>

